<template>
  <div class="cropper-app">
    <!-- 剪裁组件弹窗 -->
    <el-dialog append-to-body :title="cropperName == 'qy' ? '系统背景图片设置' : '裁切封面'" :visible.sync="cropperModel"
      width="1050px" center>
      <cropper-image :width='width' :height='height' :Name="cropperName" @uploadImgSuccess="handleUploadSuccess"
        ref="child"></cropper-image>
    </el-dialog>
    <!--查看大封面-->
    <el-dialog title="查看大封面" :visible.sync="imgVisible" center>
      <img :src="imgName" v-if="imgVisible" style="width: 100%" alt="查看" />
    </el-dialog>
  </div>
</template>

<script>
import CropperImage from './CropperImage.vue'
export default {
  name: 'Tailoring',
  components: { CropperImage },
  data() {
    return {
      width: null,
      height: null,
      //裁切图片参数
      cropperModel: false,
      cropperName: '',
      imgName: '',
      imgVisible: false,
    }
  },
  methods: {
    //封面设置
    uploadPicture(name, url, width, height) {
      this.cropperName = name
      this.cropperModel = true
      this.$nextTick(() => {
        this.width = width
        this.height = height
        this.$refs['child'].init(url)
      })
    },
    //图片上传成功后
    handleUploadSuccess(data) {
      // switch (data.name) {
      //   case 'flagImg':
      //     this.formValidate.mainImage = 'http://ydfblog.cn/dfs/' + data.url
      //     break
      // }
      // this.formValidate.mainImage = '/uploads' + data
      this.$emit('getImage', { url: data, name: this.cropperName })
      this.cropperModel = false
    },
  },
}
</script>
<style scoped>
.upload-list-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 40px;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 1s;
}

.cover_icon {
  font-size: 30px;
}

.upload-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 1px #cccccc;
  cursor: pointer;
}

.upload-btn:hover {
  border: 1px solid #69b7ed;
}

.upload-btn i {
  margin: 5px;
}
</style>
